import React, { memo, useState } from 'react'
import { SearchTabsWrapper } from '@/components/app-header/c-cpns/header-center/c-cpns/search-tabs/style'
import classNames from 'classnames'

const SearchTabs = memo((props) => {
  const {titles, tabClick} = props;
  const [currentIndex, setCurrentIndex] = useState(0)
  const itemClickHandle = (index) => {
    setCurrentIndex(index);
    if ( tabClick ) tabClick(index);
  }
  return (
    <SearchTabsWrapper>
      {
        titles.map((item, index) => {
          return (
            <div className={ classNames('item', {active: currentIndex === index}) } key={ item }
                 onClick={ e => itemClickHandle(index) }>
              <span className='text '>{ item }</span>
              <div className="bottom"></div>
            </div>
          )
        })
      }
    </SearchTabsWrapper>
  )
})
export default SearchTabs
